<template>
  <a-card title="重置密码申请列表">
    <a-table :columns="columns"
             :dataSource="list"
             :pagination="pagination"
             :row-key="record=>record._id"
             @change="handleTableChange">
      <template #action="{ record }">
        <a-button size="small" type="primary" @click="reset(record._id, 2)">重置</a-button>
        &nbsp;
        <a-button size="small" type="danger" @click="ignore(record._id, 3)">忽略</a-button>
      </template>
    </a-table>
  </a-card>
</template>

<script>
import { Button, Card, message, Table } from 'ant-design-vue'
import { computed, onMounted, ref } from 'vue'
import { fetchForgetList, updateForgetStatus } from '@/api/forgetPassword'

const columns = [
  {
    title: '账号',
    dataIndex: 'account',
  },
  {
    title: '操作',
    slots: {
      customRender: 'action',
    },
  },
]
export default {
  name: 'index',
  components: {
    ACard: Card,
    ATable: Table,
    AButton: Button,
  },
  setup () {
    const list = ref([])
    const currentPage = ref(1)
    const size = ref(5)
    const total = ref(0)
    const getList = async () => {
      await fetchForgetList(currentPage.value, size.value).then(res => {
          list.value = res.data.list
          total.value = res.data.total
        },
      )
    }
    const pagination = computed(() => ({ // 此处意为：直接返回一个对象，小括号是优先级的意思，先执行小括号内部的
        total: total.value,
        current: currentPage.value,
        pageSize: size.value,
      }),
    )
    const handleTableChange = async ({ current, pageSize }) => {
      currentPage.value = current
      size.value = pageSize
      await getList()
    }
    onMounted(() => {getList()})
    const reset = async (id, status) => {
      const index = list.value.findIndex(element => element._id === id)
      await updateForgetStatus(id, status).then(res => {
        message.success(res.msg)
        list.value.splice(index, 1)
      })
    }
    const ignore = async (id, status) => {
      const index = list.value.findIndex(element => element._id === id)
      await updateForgetStatus(id, status).then(res => {
        message.success(res.msg)
        list.value.splice(index, 1)
      })
    }

    return {
      columns,
      list,
      pagination,
      handleTableChange,
      reset,
      ignore,
    }
  },

}
</script>

<style scoped>

</style>
